import React, { Component } from "react";
// withRouter是一个高阶组件, 作用就是给那些没有路由信息的组件添加路由信息
import { Link, Route, Switch, withRouter } from "react-router-dom";

class Home extends Component {
  render() {
    // console.log(this.props);
    return <div>这是首页页面</div>;
  }
}

// const About = (props) => {
//   console.log(props);
//   return <div>这是关于页面</div>;
// };
class About extends Component {
  render() {
    // console.log(this.props);
    return <div>这是关于页面</div>;
  }
}

// const Abc = () => <About></About>;

class Detail extends Component {
  render() {
    return <div>这是详情页</div>;
  }
}

@withRouter
class Mine extends Component {
  render() {
    console.log(this.props);
    return <div>我的页面</div>;
  }
}
// const Mine = withRouter((props) => {
//   console.log(props);
//   return <div>我的页面</div>;
// });

class App extends Component {
  render() {
    return (
      <>
        <h2>路由组件的渲染方式</h2>
        <ul>
          <li>
            <Link to="/home">首页</Link>
          </li>
          <li>
            <Link to="/about">关于页</Link>
          </li>
          <li>
            <Link to="/detail">详情页</Link>
          </li>
          <li>
            <Link to="/mine">我的</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          {/* 渲染组件最常见的方式是使用component属性 */}
          {/* component渲染出来的组件既可以渲染类组件，也可以渲染函数组件 */}
          {/* 并且渲染的组件都是直接拥有路由信息的 */}
          <Route path="/home" component={Home}></Route>

          {/* render属性也可以用于渲染组件 */}
          {/* 但是render属性只能渲染函数组件 */}
          {/* 因为render可以写函数，所以可以在函数里面写逻辑判断，从而做到路由鉴权等工作 */}
          <Route
            path="/about"
            render={(props) => {
              if (3 > 1) {
                return <About {...props}></About>;
              } else {
                return <div>123</div>;
              }
            }}
          ></Route>

          {/* children属性也可以做渲染组件 */}
          {/* children在没有Switch的情况下，无论url是否都会渲染 */}
          {/* 当有Switch的情况下，作用和render一摸一样 */}
          <Route path="/detail" children={() => <Detail />}></Route>

          {/* 还可以通过插槽的方式来做渲染组件 */}
          {/* 插槽的方式既可以渲染类组件，也可以渲染函数组件 */}
          <Route path="/mine">
            <Mine />
          </Route>
        </Switch>
      </>
    );
  }
}

export default App;
